<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>瑞慈健康</title>
    <meta name="description" content="瑞慈健康">
    <meta name="keywords" content="瑞慈健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./plugins/elementui/index.css">
    <link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <style>
           .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
    </style>
</head>
<body class="hold-transition" style="height: 670px;">
<div id="app" style="height: 100%;">
    <div class="content-header">
        <h1>账户管理<small>账户信息</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/2-1' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>账户管理</el-breadcrumb-item>
            <el-breadcrumb-item>账户信息</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container" style="height: 100%;">
        <div class="box" style="height: 100%;">
           <!-- 个人信息区 -->
         <el-card shadow="always" style="margin: 30px;width: 500px;">
            <el-form label-width="80px" size="small" >
                <el-form-item label="上传头像">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9527/member/image/upload "
                            :auto-upload="true"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
              <el-form-item label="用户名">
                <el-input  v-model="formData.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-input    v-model="formData.gender"  style="width:270px" autocomplete="off"></el-input>
              
              </el-form-item>
              <el-form-item label="密码">
                <el-input disabled="" type="password"  v-model="updatePwd"  style="width:270px" autocomplete="off"></el-input>
                <el-button type="" @click="handlePassword()" style="margin-left: 20px;">修改密码</el-button>
              </el-form-item>
               <el-form-item label="电话">
                <el-input v-model="formData.telephone"  style="width:150px" autocomplete="off"></el-input>
                <el-input v-model="yzm" placeholder="验证码" style="width: 70px;margin-left: 20px;" autocomplete="off"></el-input>
                <el-button type="" @click="sendText" style="margin-left: 20px;">发送验证码</el-button>
              </el-form-item>
            </el-form>
              <div style="text-align: center;">
                <!-- <el-popconfirm
                  width="220"
                  confirm-button-text="确定"
                  cancel-button-text="不,再想想"
                  icon-color="#626AEF"
                  title="您确定要修改信息吗?"
                  @confirm="save()"
                >
                  <template #reference>
                   <el-button type="primary">保存</el-button>
                  </template>
                </el-popconfirm>
                  <el-button type="warning">取消</el-button> -->
                  <el-popover
                  placement="top"
                  width="160"
                  v-model="visible">
                  <p>确定修改个人信息吗？</p>
                  <div style="text-align: right; margin: 0">
                      <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                      <el-button type="primary" size="mini" @click="updatePersonalInfo">确定</el-button>
                  </div>
                  
                  <el-button type="primary" slot="reference">保存</el-button>
                  <el-button  slot="reference" @click="resetting">重置</el-button>

                  </el-popover>


              </div>

                

              
              
          </el-card>
  
          <!-- 对话框 -->
           <el-dialog  title="修改密码" :visible.sync="dialogFormVisible" width="26%" >
            <el-form :model="pwd" :rules="rules" label-width="80px" size="small" ref="userPassword">
              <el-form-item prop="password1" label="原密码">
                <el-input type="password" v-model="pwd.password1" show-password style="width: 200px;"></el-input>
              </el-form-item>
              <el-form-item prop="password2" label="新密码">
               <el-input type="password" v-model="pwd.password2" show-password style="width: 200px;"></el-input>
              </el-form-item>
              <el-form-item prop="password3" label="确认密码">
                <el-input type="password" v-model="pwd.password3" show-password style="width: 200px;"></el-input>
              </el-form-item>
            </el-form>
              <div style="text-align:center;margin-top: 40px;">
                <span class="dialog-footer" style="text-align:center;">
                  <el-button @click="cancal">取消</el-button>
                  <el-button type="primary" @click="subPwd">
                    确定
                  </el-button>
                </span>
              </div>
          </el-dialog>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="./js/vue.js"></script>
<script src="./plugins/elementui/index.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            imageUrl:JSON.parse(localStorage.getItem("personal")).avatarURL  || "",
            visible: false,
            formData:JSON.parse(localStorage.getItem("personal"))  || {},
            pwd:{},
            yzm:"",
            updatePwd:JSON.parse(localStorage.getItem("personal")).password || "",
            rules: {
                password1: [
                  { required: true, message: '请输入原密码', trigger: 'blur' },
                  { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password2: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                password3: [
                  { required: true, message: '请确认密码', trigger: 'blur' },
                  { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
              },
            

            time1:new Date("Mon Oct 10 2016 "+"11:40:00"),
            
            dialogFormVisible:false,
        
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
          this.findPage()
          console.log(localStorage.getItem("personal")); 
        },
        methods: {
                //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
                handleAvatarSuccess(response, file) {
                    this.formData.avatarURL = response.data.imageUrl[0];
                    this.imageUrl = response.data.imageUrl[0];

                },
                //上传图片之前执行
                beforeAvatarUpload(file) {
				  const isJPG = file.type === 'image/jpeg';
				  const isLt2M = file.size / 1024 / 1024 < 2;
				  if (!isJPG) {
					this.$message.error('上传套餐图片只能是 JPG 格式!');
				  }
				  if (!isLt2M) {
					this.$message.error('上传套餐图片大小不能超过 2MB!');
				  }
				  return isJPG && isLt2M;
                },
            //更新个人信息
            updatePersonalInfo(){
                this.formData.password = this.updatePwd;
                console.log(this.formData);
                axios.post('http://localhost:9527/user/updateUser',this.formData).then((resp)=>{
                    // console.log(resp)
                    if (resp.data.flag){
                        //添加后，更新页面
                        //重新登录
                        this.visible = false;
                        this.$message({ showClose: true,message:"修改成功，重新登录生效！",type:"success"})
                        //
                    }
                })
            },
            //重置个人信息
            resetting(){
                this.formData = JSON.parse(localStorage.getItem("personal"))  || {}
            },
            handlePassword(){
                console.log("111111111");
                this.dialogFormVisible = true;
            },
            cancal(){
                this.dialogFormVisible = false;
            },
            // 验证码
            sendText(){

                this.$message({ showClose: true,message:"发送验证码成功！",type:"success"})

                setTimeout(()=>{
                    this.yzm = '123';
                },800)

                
            },
            subPwd(){
                if(this.pwd.password1 == this.formData.password){
                    if(this.pwd.password2 == this.pwd.password3){
                        this.updatePwd = this.pwd.password3;
                       this.dialogFormVisible = false;
                    }else{
                        this.$message({ showClose: true,message:"两次密码不一致！",type:"error"})
                    }
                }else{
                    this.$message({ showClose: true,message:"原密码错误！",type:"error"})
                }



            },
            //编辑
            handleEdit() {
             
            },
            //添加
            handleAdd () {
              
            },
            //分页查询
            findPage() {
                  
                },
            // 重置表单
            resetForm() {
               
            },
            // 弹出添加窗口
            handleCreate() {
              
            },
            // 弹出编辑窗口
            handleUpdate(row) {
               
            },
            //切换页码
            handleCurrentChange(currentPage) {
              
            },
            // 删除
            handleDelete(row) {
               
            }
        }
    })
</script>
</html>
